<template>
  <div class="hello">
    <el-main>
      <el-card>
        <span style="font-size: 22px">系统登陆</span>
        <el-divider style="width: 200%"></el-divider>
        <el-row>
          <el-input
            class="userInput"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
            v-model="userName"
          ></el-input>
        </el-row>
        <el-row>
          <el-input
            class="userInput"
            show-password
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"
            v-model="userPassword"
          ></el-input>
        </el-row>
        <el-row style="width: 95%">
          <el-input
            style="width: 50%; margin-top: 20px; float: left"
            prefix-icon="el-icon-key"
            placeholder="验证码"
            v-model="safetyCode"
          ></el-input>
          <codeTest
            style="float: right; margin-right: 5%; margin-top: 20px"
            v-on:closeMain="closeMain"
          ></codeTest>
        </el-row>
        <el-row>
          <el-button
            @click="login"
            type="primary"
            style="width: 90%; margin-top: 20px"
          >登录
          </el-button
          >
        </el-row>
      </el-card>
    </el-main>
  </div>
</template>

<script>
import codeTest from "../components/codeTest.vue";

export default {
  name: "HelloWorld",
  components: {
    codeTest,
  },
  data() {
    return {
      userName: "", //用户名
      userPassword: "", //密码
      safetyCode: "", //安全码
      code: "", //正确的安全码
      iframeWin: null,
    };
  },
  mounted() {
  },
  methods: {
    closeMain(val) {
      this.code = val;
    },
    login() {
      let params = new URLSearchParams();
      params.append("userName", this.userName);
      params.append("userPassword", this.userPassword);
      if (
        this.userName == "" ||
        this.userName == null ||
        this.userPassword == "" ||
        this.userPassword == null
      ) {
        this.$message.error("账户密码不可为空");
      } else {
        if (this.safetyCode.toUpperCase() !== this.code.toUpperCase()) {
          this.$message.error("验证码有误，重新输入");
        } else {
          this.$api
            .Login(params)
            .then((res) => {
              console.log(res)
              if (res.code == "200") {
                sessionStorage.setItem("token", res.token);
                sessionStorage.setItem("userName", res.data.userName);
                sessionStorage.setItem("userGuid" , res.data.guid);
                this.$message.success("登录成功！");
                this.$router.push({
                  path: "/",
                });
              } else if (res.code == "400") {
                this.$message.error("账户或密码有误，登录失败！");
              }
            })
            .catch((err) => {
              console.log(err);
              this.$message.error('页面报错，请联系管理员')
            });
        }
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;

  background-position: center center;
  background-size: 100% 100% !important;
  background: url("../assets/img/login2.jpg");
}

.el-main {
  display: flex;
  justify-content: center;
  margin-top: 5%;
}

.el-card {
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.userInput {
  width: 90%;
  height: 50px;
  margin-top: 20px;
}
</style>
